import React, {PureComponent, Fragment} from 'react';
import {routerRedux, Link} from 'dva/router';
import Uploader from '../Goods/Uploader';
import { connect } from 'dva';
import {
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Icon,
    Button,
    Dropdown,
    Menu,
    InputNumber,
    DatePicker,
    Modal,
    message,
    Checkbox,
} from 'antd';
import G from '../../utils/g';
import b64_sha256 from '../../utils/sha256';

const FormItem = Form.Item;

@Form.create()
@connect(({ businessList, loading }) => ({
  businessList,
  loading: loading.models.businessList,
}))
export default class BusinessModal extends PureComponent {
    postData = {
        imgs: []
    }
    state = {
        confirmLoading : false,
    }

    handleAddBusiness = ()=>{
        const { form, dispatch } = this.props;
        const headUrl = this.postData.imgs[0];
	    form.validateFieldsAndScroll((err, values) => {

	    	if(err){
	    		return false;
	    	}
            this.setState({
                confirmLoading: true
            });
            const { phone, password, nickname, email } = values;
	    	 dispatch({
	            type: 'businessList/add',
	            payload: {
	                j_username:phone,
                    j_password:b64_sha256(password + '{' + phone + '}'),
                    nickname: nickname,
                    headUrl: headUrl,
                    clientId: '02' + G.uuid(32),
                    email: email,
	            },
	        }).then(()=> {
                 form.resetFields();
                this.setState({
                    confirmLoading: false
                });
	            this.props.handleModalVisible(false);
	        })
	    });
    }

    bindImgsChange = (file)=> {
        this.postData.imgs = [];
        file.forEach(v=> {
            this.postData.imgs.push(v.url)
        });
        if (file.length == 0) {
            this.setState({
                clearImgs: true
            });
        }
        //console.log(this.postData);
    };

    onCancel = ()=>{
        const {handleModalVisible} = this.props;
        this.props.form.resetFields();
        typeof handleModalVisible == 'function' && handleModalVisible();
    }

    render() {
        const {modalVisible, handleModalVisible} = this.props;
        const {getFieldDecorator} = this.props.form;
        const { confirmLoading } = this.state;
        let imgsFileList = [];
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };

        return <Modal
            title="新增商家"
            visible={modalVisible}
            confirmLoading={confirmLoading}
            onOk={this.handleAddBusiness}
            onCancel={this.onCancel}
        >
            <Form onSubmit={this.handleAddBusiness}>
                <FormItem
                    label="手机号码"
                    {...formItemLayout}
                >
                    {getFieldDecorator('phone', {
                        rules: [
                            {
                                required: true,
                                message: '请输入正确的手机号',
                                pattern: /^1\d{10}$/
                            },
                        ],
                    })(<Input placeholder="用于账号登陆用户名"/>)}
                </FormItem>
                <FormItem
                    label="密码"
                    {...formItemLayout}
                >
                    {getFieldDecorator('password', {
                        rules: [
                            {
                                required: true,
                                message: '长度至少6位',
                                min: 6
                            },
                        ],
                    })(<Input placeholder="用于账号登陆密码" type="password"/>)}
                </FormItem>
                <FormItem
                    label="昵称"
                    {...formItemLayout}
                >
                {getFieldDecorator('nickname', {
                        rules: [
                            {
                                required: true,
                                message: '昵称不能为空',
                            }
                        ]
                    })(<Input placeholder="请输入账户昵称" />)}
                    
                </FormItem>
                <FormItem
                    label="邮箱"
                    {...formItemLayout}
                >
                    {getFieldDecorator('email', {
                    })(<Input placeholder="用于订单邮件通知" type="text"/>)}
                </FormItem>
                <FormItem
                    label="头像"
                    {...formItemLayout}
                >
                    <Uploader
                        length={1}
                        fileList={imgsFileList}
                        onChange={this.bindImgsChange}
                    />
                </FormItem>
            </Form>
        </Modal>
    }
}